<template>
  <div id="feedback-create" class="main-container container-limited container-fluid page-holder">
    <breadcrumb />
    <el-form ref="form" :model="form" :rules="rules" label-width="5rem" class="m-t-16">
      <el-form-item label="分类" prop="type" ref="type">
        <el-select v-model="form.type" placeholder="请选择分类">
          <el-option v-for="(cn, key) in types" :key="key" :label="cn" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title" ref="title">
        <el-input v-model.trim="form.title" />
      </el-form-item>
      <el-form-item label="详细描述" prop="content" ref="content">
        <el-input v-show="false" v-model="form.content" />
        <ckeditor :content.sync="form.content" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">提交反馈</el-button>
        <el-button class="right" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import breadcrumb from '../breadcrumb';
import { types } from '../format';

export default {
  name: 'FeedbackCreate', // 创建反馈
  components: { breadcrumb },
  data() {
    return {
      types,
      form: {
        title: '',
        content: '',
        type: '',
      },
      rules: {
        title: [{ required: true, validator: this.$va.title }],
        content: [{ required: true, validator: this.$va.content }],
        type: [{ required: true, validator: this.$va.type }],
      },
      loading: false,
    };
  },
  methods: {
    // 提交反馈
    onSubmit() {
      this.$refs.form.validate((valid, errs) => {
        if (valid) {
          this.loading = true;
          this.$api.feedback.create(this.form)
            .then(res => this.$router.push(`/feedback/${res.data.id}`))
            .catch(() => {})
            .then(() => { this.loading = false; });
        } else this.$refs[Object.keys(errs)[0]].$el.scrollIntoView({ block: 'center' });
      });
    },
  },
};
</script>

<style></style>
